<template>
	<view>
		<view class="head-box">
			<image src="/pages/house/static/icon/publish.png"></image>
			<view class="text">
				<view>填写房源信息</view>
				<view class="normal">为您提供最专业的服务</view>
			</view>
		</view>
		<view class="choose">
			<view class="title">选择类型</view>
			<view class="list u-flex">
				<view class="u-line-1" :class="{active:sIndex == 0}" @click="sIndex = 0">商品房</view>
				<view class="u-line-1" :class="{active:sIndex == 1}" @click="sIndex = 1">商铺</view>
				<view class="u-line-1" :class="{active:sIndex == 2}" @click="sIndex = 2">地皮</view>
				<view class="u-line-1" :class="{active:sIndex == 3}" @click="sIndex = 3">自建房</view>
				<view class="u-line-1" :class="{active:sIndex == 4}" @click="sIndex = 4">厂房</view>
				<view class="u-line-1" :class="{active:sIndex == 5}" @click="sIndex = 5">别墅</view>
			</view>
			
			<view class="out-login">
				<u-button type="primary" shape="circle" @click="jumpNext">下一步</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sIndex:0
			}
		},
		methods: {
			jumpNext(){
				this.sIndex === 0 && this.$app.jump('/pages/house/publish/commodity')//商品房
				this.sIndex === 1 && this.$app.jump('/pages/house/publish/shop')//商铺
				this.sIndex === 2 && this.$app.jump('/pages/house/publish/land')//地皮
				this.sIndex === 3 && this.$app.jump('/pages/house/publish/self-built')//自建房
				this.sIndex === 4 && this.$app.jump('/pages/house/publish/plant')//厂房
				this.sIndex === 5 && this.$app.jump('/pages/house/publish/villa')//别墅
			}
		}
	}
</script>

<style lang="scss">
	.head-box{
		background-color: $tc;border-radius: 0 0 50rpx 50rpx;position: relative;height: 333rpx;
		image{
			display: block;width: 335rpx;bottom: 40rpx;position: absolute;right: 20rpx;height: 212rpx;
		}
		.text{font-weight: bold;color: #fff;font-weight: bold;position: relative;font-size: 30rpx;padding: 100rpx 0 0 50rpx;line-height: 50rpx;
			.normal{font-weight: normal;}
		}
	}
	.choose{
		padding: 50rpx 32rpx 0;
		.title{font-weight: bold;font-size: 32rpx;}
		.list{
			flex-wrap: wrap;justify-content: space-between;
			view{width: 204rpx;height: 90rpx;background-color: #f4f4f4;color: #333;font-weight: bold;font-size: 30rpx;text-align: center;line-height: 90rpx;border-radius: 100rpx;margin-top: 20rpx;}
			.active{background-color: #ff3737;color: #fff;}
		}
	}
	.out-login{padding-top: 200rpx;}
</style>
